<template>
	<nav-header title="流量费率" custom-nav>
		<template v-slot:right>
		</template>
	</nav-header>
	<view class="container">
		<!-- <view class="reat-container">
			<view class="rate">流量费率</view>
			<view class="input-container"> <text class="currency-symbol">￥</text>
				<input @input="handleInput" type="number" v-model="ratePrice" placeholder="￥0.01/人次起" /></input>
			</view>
			<view>元/人次</view>
		</view> -->
		<view class="container-input">
			<view class="left-item text-sm-Medium">流量费率</view>
			<uni-easyinput type="number" class="right-input" :inputBorder="false" :clearable="false"
				@input="handleInput" v-model="ratePrice" placeholder="￥0.01/人次起">
				<template v-slot:right>
					<text class="price-unit text-sm-Regular">元/人次</text>
				</template>
			</uni-easyinput>
		</view>
		<!-- <view>快捷设置:</view>
		<up-line color="#2979ff"></up-line> -->

		<view class="reat-container">
			<!-- <up-tag plain @click="servicePricePerPerson(20)" text="¥20/人次"></up-tag>
			<up-tag plain @click="servicePricePerPerson(50)" text="¥50/人次"></up-tag>
			<up-tag plain @click="servicePricePerPerson(100)" text="¥100/人次"></up-tag> -->
			<view class="rec2">
				<button class="btnstyle" plain @click="servicePricePerPerson(20)">
					<text class="text-xs-Medium">¥20/人次</text>
				</button>
				<button class="btnstyle" plain @click="servicePricePerPerson(50)">
					<text class="text-xs-Medium">¥50/人次</text>
				</button>
				<button class="btnstyle" plain @click="servicePricePerPerson(100)">
					<text class="text-xs-Medium">¥100/人次</text>
				</button>
			</view>

		</view>

		<view class="reat-container">
			<view class="rec">
				<!-- <up-tag plain @click="servicePricePerPerson(0.01)">¥ 0.01/人次<text
						class="custom-color">官方新手推荐</text></up-tag> -->
				<button class="buttonStyle" @click="servicePricePerPerson(0.01)">
					<text class="text-xs-Medium">官方新手推荐</text>
				</button>
				<button class="buttonStyle2" @click="servicePricePerPerson(0.01)">
					<text class="text-xs-Medium">¥ 0.01/人次</text>
				</button>
			</view>
			<!-- <up-tag plain @click="servicePricePerPerson(0.5)">¥0.5/人次 <text class="custom-color">进阶推广</text></up-tag> -->
		</view>

		<view class="reat-container">
			<view class="rec">
				<button class="buttonStyle" @click="servicePricePerPerson(0.5)">
					<text class="text-xs-Medium">进阶推广</text>
				</button>
				<button class="buttonStyle2" @click="servicePricePerPerson(0.5)">
					<text class="text-xs-Medium">¥0.5/人次</text>
				</button>
			</view>
		</view>

		<view class="reat-container">
			<view class="rec">
				<!-- <up-tag plain @click="servicePricePerPerson(1)">¥1/人次 <text class="custom-color">成交率激增加</text></up-tag> -->
				<button class="buttonStyle" @click="servicePricePerPerson(1)">
					<text class="text-xs-Medium">成交率激增</text>
				</button>
				<button class="buttonStyle2" @click="servicePricePerPerson(1)">
					<text class="text-xs-Medium">¥1/人次</text>
				</button>
			</view>
			<!-- <up-tag plain @click="servicePricePerPerson(10)">¥10/人次 <text class="custom-color">急需推广</text></up-tag> -->
		</view>

		<view class="reat-container">
			<view class="rec">
				<button class="buttonStyle" @click="servicePricePerPerson(10)">
					<text class="text-xs-Medium">急需推广</text>
				</button>
				<button class="buttonStyle2" @click="servicePricePerPerson(10)">
					<text class="text-xs-Medium">¥10/人次</text>
				</button>
			</view>
		</view>

		<!-- 	<view>
	    <view class="rate-container" v-for="rate in rates" :key="rate.text">
	      <text>{{ rate.text }}</text>
	      <text v-if="rate.description">{{ rate.description }}</text>
	    </view>
	  </view> -->

	</view>

	<view class="button-container">
		<view class="send-button">
			<!-- <up-button type="primary" @click="submit" text="确认"></up-button> -->
			<button class="btncolor" type="primary" size="mini" @tap.stop.native="submit">
				<text class="text-md-Medium">确认</text>
			</button>
		</view>
	</view>

</template>

<script>
	import useCooperateStore from '@/store/cooperateStore.js'
	export default {
		data() {
			return {
				ratePrice: null
			};
		},
		methods: {
			servicePricePerPerson(price) {
				this.ratePrice = price
			},

			handleInput(event) {
				// let value = event.target.value;
				// // 只允许数字和小数点，且小数点只能有一个
				// value = value.replace(/[^\d.]/g, '').replace(/(\..*)\./g, '$1');
				// this.ratePrice = value
			},
			submit() {

				const store = useCooperateStore()
				store.setPrice(this.ratePrice)
				uni.showToast({
					title: '设置成功',
					icon: 'success',
					duration: 1000 // 设置显示时长为 3000 毫秒
				});

				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 800);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 24rpx 32rpx;
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.container-input {
		display: flex;
		// padding: 24rpx 32rpx;
		flex-direction: column;
		gap: 24rpx;

		.left-item {
			color: $gray-900;
		}
	}

	.right-input {
		flex: 1;

		:deep(.uni-easyinput__content) {
			height: 88rpx;
			padding: 24rpx 32rpx !important;
			background-color: $gray-100 !important;
		}

		:deep(.uni-input-placeholder.uni-easyinput__placeholder-class) {
			font-size: 28rpx;
			line-height: 40rpx;
			font-weight: 400;
			color: $gray-400;
		}

		:deep(.uni-easyinput__content-input) {
			padding: 0 !important;
		}

		.price-unit {
			color: $gray-400;
		}
	}

	.rec {
		display: flex;
		align-items: center;

		:deep(.u-tag) {
			width: 305rpx;
		}
	}
	
	.rec2 {
		display: flex;
		align-items: center;
		gap: 24rpx;
	}

	.reat-container {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* 根据需要调整子元素的排列方式，这里是均匀分布 */
		// margin-bottom: 40rpx;
		// margin-top: 20rpx;

		.btnstyle {
			/* #ifdef APP-PLUS */
			border: 2rpx solid $brand-200;
			/* #endif */
			/* #ifndef APP-PLUS */
			border: 1rpx solid $brand-200;
			/* #endif */
			color: $brand-500;
			padding: 8rpx 24rpx;
			border-radius: 34rpx;
			line-height: 20rpx;
			height: 54rpx;
			text-align: center;
		}

		.buttonStyle {
			// border: 1rpx solid $brand-200;
			background-color: $brand-200;
			color: $brand-500;
			padding: 8rpx 24rpx;
			border-radius: 0;
			border-top-left-radius: 34rpx;
			border-bottom-left-radius: 34rpx;
			line-height: 20rpx;
			height: 54rpx;
			text-align: center;
		}

		.buttonStyle2 {
			border: 1rpx solid $brand-200;
			color: $brand-500;
			padding: 8rpx 24rpx;
			border-radius: 0;
			border-top-right-radius: 34rpx;
			border-bottom-right-radius: 34rpx;
			line-height: 20rpx;
			height: 54rpx;
			text-align: center;
		}

	}

	.input-container {
		position: relative;
		display: flex;
		align-items: center;
	}

	.currency-symbol {
		position: absolute;
		left: -35rpx;
		font-size: 18px;
		color: #333;
	}

	.rate-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 10px;
	}

	.rate-container {
		display: inline-block;
		margin-top: 20rpx;
		margin-right: 10px;
		margin-bottom: 10px;
		border: 1px solid #ccc;
		padding: 5px;
		text-align: center;
	}

	.custom-color {
		margin-left: 10rpx;
		color: red;
	}

	.button-container {
		position: fixed;
		bottom: 42rpx;
		left: 0;
		width: 100%;
		background-color: #fff;
		border-top: 1rpx solid $gray-200;
		z-index: 999;

		.send-button {
			padding: 24rpx 32rpx;

			.btncolor {
				width: 100%;
				background-color: $brand-500;
				color: $white;
				padding: 16rpx 32rpx;
				border-radius: 40rpx;
				text-align: center;
				line-height: 46rpx;
				vertical-align: middle;
			}
		}
	}
</style>